import React, { useEffect } from 'react'
import { useRoutes } from 'react-router-dom'
import PubSub from 'pubsub-js'
import createRoute from '@/router/index'
import styles from './index.module.less'
import Header from './Header'
import Footer from '@/components/Footer'

export default function FrameOne() {
  const routesInfo = createRoute(useRoutes)

  useEffect(() => {
    const scrollWindow = PubSub.subscribe('scrollWindow', () => {
      const win = document.getElementsByClassName(styles.container)[0]
      win.scrollTo({ top: 0, behavior: 'smooth' })
    })

    return () => {
      PubSub.unsubscribe(scrollWindow)
    }
  }, [])

  return (
    <>
      <Header />

      <div className={styles.container}>
        <div className={styles.routerPart}>
          {/* 路由展示区域 */}
          {routesInfo}
        </div>

        <Footer />
      </div>
    </>
  )
}
